import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: Scaffold(
          appBar: AppBar(title: Text('Stack层叠组件')),
          body: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 写法1， 单个定位，Stack根据子元素尺寸最大的自动设置宽高
    /*return Center(
      // Stack // children从后往前层叠
      child: Stack(
        alignment: Alignment(0,1), // 让里面所有的元素都居中(0的位置是中心点，值可以选-1到1之间的数)
        children: <Widget>[
          Container(
            width: 300,
            height: 400,
            color: Colors.blue,
          ),
          Text('我是一个文本111', style: TextStyle(
            fontSize: 20,
            color: Colors.white
          ),)
        ],
      ),
    );*/

    // 写法2，多个定位结合Align组件使用（推荐这种写法）
    /* return Center(
      child: Container(
        width: 300,
        height: 400,
        color: Colors.green,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topRight,
              child: Icon(Icons.home, size: 40,color: Colors.white,),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child:  Icon(Icons.search, size: 40,color: Colors.blue,),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.alarm, size: 40,color: Colors.red,),
            ),
          ],
        ),
      ),
    ); */
    // 写法3，多个定位结合Positioned组件使用（推荐这种写法）
    return Center(
      child: Container(
        width: 300,
        height: 400,
        color: Colors.green,
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 10,
              top: 10,
              child: Icon(Icons.home, size: 40,color: Colors.white,),
            ),
            Positioned(
              right: 10,
              top: 10,
              child:  Icon(Icons.search, size: 40,color: Colors.blue,),
            ),
            Positioned(
              left: 10,
              bottom: 10,
              child: Icon(Icons.alarm, size: 40,color: Colors.red,),
            ),
          ],
        ),
      ),
    );
    
  }
}

